<template>
  <el-drawer :visible.sync="drawer" direction="rtl" size="50%" :with-header="false" :width="700">
    <div class="drawer_box">
      <div class="drawer_title">
        <div class="drawer_t">
          <div class="drawer_t_l">
            <img class="drawer_t_l_img" src="/static/skin/herodoo/main/platform/home/img/piliangoumai.png" alt="">
            查看订单
          </div>
          <img class="drawer_t_r" src="/static/skin/herodoo/main/platform/home/img/guanbi.png" alt=""
            @click="drawer = false">
        </div>
      </div>
      <div class="drawer_content">
        <div class="list-box">
          <div class="left">剩余核销码数量:</div>
          <div class="right">{{ totals }}个</div>
        </div>
        <div class="block" v-for="(item, i) in form" :key="i">
          <div class="list-box">
            <div class="left row">
              <div class="del-box">
                <div class="del" @click="delForm(i)" v-if="form.length > 1"></div>
              </div>
              使用人{{ i + 1 }}:
            </div>
            <div class="right">
              <input class="input" v-model="item.phone" placeholder="请输入手机号" type="number" max="11" />
            </div>
          </div>
          <div class="list-box">
            <div class="left row">
              <div class="del-box">

              </div>
              下发数量:
            </div>
            <div class="right">
              <el-input-number v-model="item.num" @change="handleChange" size="small" :min="0" :max="getBig[i]"
                label="请输入数量"></el-input-number>
            </div>
          </div>
        </div>
        <div class="list-box">
          <div class="left">添加使用人:</div>
          <div class="right">
            <div class="add_content" @click="addForm">
              <i class="el-icon-plus"></i>
              <span>点击添加使用人</span>
            </div>
          </div>
        </div>
      </div>
      <div class="drawer_footer">
        <div class="footer-btn">确认</div>
      </div>
    </div>

  </el-drawer>
</template>

<script>
export default {
  props: {
    total: {
      type: Number,
      default: 10
    }
  },
  computed: {
    totals() {
      let formNum = 0;
      this.form.map(v => {
        formNum += v.num
      })

      return this.total - formNum;
    },
    getBig() {
      let arr = [];
      this.form.map((v, j) => {
        let n = 0, arr1 = [];
        arr1 = this.form.filter((x, i) => i != j);
        arr1.map(o => {
          n += o.num
        })
        arr.push(this.total - n)
      })
      return arr
    }
  },
  data() {
    return {
      octopus: this.$parent.$parent.octopus,
      drawer: false,
      form: [
        {
          num: 0,
          total: 10,
          key: 'form_1',
          phone: ''
        }
      ],
    }
  },
  methods: {
    open() {
      this.drawer = true;
    },
    addForm() {
      let num = this.form.length;
      this.form.push(
        {
          num: 0,
          total: 10,
          key: `form_${num + 1}`,
          phone: ''
        }
      )
    },
    delForm(e) {
      this.form.splice(e, 1)
    }
  }
}
</script>

<style scoped>
.drawer_box {
  padding: 3rem .8rem 3rem 0;
  height: calc(100% - 5rem);
  display: flex;
  flex-direction: column;

}

.drawer_title {
  box-shadow: 0px 5px 5px rgb(230 228 228 / 30%);
  padding: 1rem 0;
}

.title {
  font-size: 1.8rem;
  font-weight: bold;
  padding: 1rem 0;
}

.drawer_t {
  padding: 0 2.8rem;
  display: flex;
  justify-content: space-between;
}

.drawer_t_l {
  display: flex;
  align-items: center;
  font-size: 2rem;
  font-weight: bold;
}

.drawer_t_l_img {
  width: 2.8rem;
  margin-right: 1rem;
}

.drawer_t_r {
  width: 3rem;
  height: 3rem;
  cursor: pointer;
}

.list-box {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.list-box {
  /* height: 3.5rem; */
  line-height: 4rem;
  margin-top: 2rem;
}

.list-box .left {
  width: 20%;
  font-size: 1.5rem;
  /* display: flex;
    align-items: center; */
}

.list-box .right {
  width: 80%;
}

.list-box .right .delte {
  font-size: 1.6rem;
  color: #898582;
  margin-left: 2rem;
  cursor: pointer;
}

.list-box .right .delte:hover {
  color: #F87338;
}

.list-box .right .add_content {
  height: 4.5rem;
  line-height: 4.5rem;
  border: 1px dashed #F87338;
  display: inline-block;
  padding: 0 1.5rem;
  cursor: pointer;
  border-radius: .5rem;
}

.list-box .right .el-input {
  width: 100%;
  height: 4.5rem;
}

.list-box .right .add_content i {
  color: #F87338;
  font-weight: 700;
  margin-right: .5rem;
}



.drawer_content {
  overflow-y: auto;
  margin-top: 1.5rem;
  height: calc(100vh - 13rem);
  padding: 0 3rem;
  width: 100%;
  padding-bottom: 1rem;
}

.drawer_content .title {
  font-size: 1.8rem;
  font-weight: bold;
}

.drawer_content .title2 {
  font-size: 1.8rem;
}

.drawer_content .driver-title {
  margin-top: 1em;
}

.iconfont {
  color: #F87338;
}

.del-box {
  width: 16px;
  height: 16px;
  margin-right: 6px;
}

.del {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #f88c52;
  position: relative;
  cursor: pointer;
}

.del::before {
  position: absolute;
  content: '';
  width: 60%;
  height: 2px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #fff;
  z-index: 1;
}

.row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

>>>.input {
  width: 100%;
  padding: 0 10px;
}

.drawer_footer {
  display: flex;
  justify-content: flex-end;
  align-content: center;
}

.drawer_footer .footer-btn {
  line-height: 4rem;
  background-color: #F78C51;
  color: #fff;
  margin: 0 1rem;
  padding: 0 3rem;
  border-radius: .5rem;
  cursor: pointer;
}

.drawer_footer .reject {
  background-color: #2e3037;
}
</style>